<template>
  <div class="box">
    <div id="" style="margin-bottom: 30px;">
      <el-button :type="type=='代理管理'?'primary':''" v-has @click="type='代理管理'">代理管理</el-button>
      <el-button :type="type=='应用授权管理'?'primary':''" v-has @click="type='应用授权管理'">应用授权管理</el-button>
    </div>

    <template v-if="type=='代理管理'">
      <el-table ref="multipleTable" :data="tableData1" border tooltip-effect="dark" fit stripe highlight-current-row>
        <el-table-column type="selection"></el-table-column>
        <el-table-column v-for="item in tableHead1" :key="item.id" :label="item.label" :prop="item.title"
          align="center">
          <template v-slot="scope">
            <div v-if="item.title!='oper1'">
              {{scope.row[item.title]}}
            </div>
            <div v-else>
              <el-button type="primary" size="mini" @click="openFullScreen2(scope.row[item.title])">
                {{scope.row[item.title]?'断开代理':'代理'}}
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>
    <template v-if="type=='应用授权管理'">
      <el-table ref="multipleTable" :data="tableData2" border tooltip-effect="dark" fit stripe highlight-current-row>
        <el-table-column type="selection"></el-table-column>
        <el-table-column v-for="item in tableHead2" :key="item.id" :label="item.label" :prop="item.title"
          align="center">
          <template v-slot="scope">
            <div v-if="item.title!='oper2'">
              {{scope.row[item.title]}}
            </div>
            <div v-else>
              <el-button type="primary" size="mini">明细查询</el-button>
              <el-button type="primary" size="mini">明细统计</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </template>

  </div>
</template>

<script>
  export default {
    data() {
      return {
        ruleForm: {},
        formData: {},
        ruleForm1: {},
        formData1: {},
        ruleForm2: {},
        formData2: {},
        fileList: [],
        type: '数据导入',
        tableHead1: [{
            id: 1,
            label: "账号",
            title: "hl",
          },
          {
            id: 2,
            label: "密码",
            title: "hp",
          },
          {
            id: 3,
            label: "代理地址",
            title: "proAdd",
          },
          {
            id: 4,
            label: "代理端口",
            title: "proPort",
          },
          {
            id: 5,
            label: "操作",
            title: "oper1",
          }
        ],
        tableData1: [{
          hl: "test",
          hp: '●●●●●●●●●●',
          proAdd: '121.20.23.33',
          proPort: '3391',
          oper1: 0
        }],

        formData: {},

        tableHead2: [{
            id: 1,
            label: "ACL类型",
            title: "acl",
          },
          {
            id: 2,
            label: "URL",
            title: "url",
          },
          {
            id: 3,
            label: "备注",
            title: "note",
          }
        ],
        tableData2: [{
            acl: "权限认证",
            url: '/api/sys/dataOperationMaintenance',
            note: '数据运维数据接口'
          },
          {
            acl: "权限认证",
            url: '/api/sys/configurationManagement',
            note: '配置管理数据接口'
          },
          {
            acl: "权限认证",
            url: '/api/sys/visualizationEngineComponents',
            note: '引擎数据接口'
          }
        ]

      };
    },
    computed: {
      uploadFile() {
        return process.env.VUE_APP_BASE_API + "/dc/importCustomer";
      },
      headers() {
        const head = {
          token: this.$store.getters.token,
        };
        return head;
      },
    },
    methods: {
      submitForm() {
        this.$message({
          type: "success",
          message: '上传目录成功'
        })
      },
      resetForm() {

      },
      openFullScreen2(status) {
        const loading = this.$loading({
          lock: true,
          text: status ? '断开连接中' : '代理连接中',
          spinner: 'el-icon-loading',
          background: 'rgba(0, 0, 0, 0.7)'
        });
        setTimeout(() => {
          loading.close();
          this.$message({
            type: 'success',
            message: status ? '断开连接成功' : '代理连接成功'
          })
          this.tableData1[0].oper1 = this.tableData1[0].oper1 ? 0 : 1
        }, 2000);
      }
    }
  }
</script>

<style lang="scss" scoped>
  .box {
    padding: 30px;
  }
</style>
